{% extends "base.html" %}

{% block title %}批量处理 - {{ folder.name }}{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="/static/css/chunkgo_batchdocs.css">
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="page-header d-flex justify-content-between align-items-center">
            <h3>批量处理 - {{ folder.name }}</h3>
            <a href="/chunkgo" class="btn btn-outline-primary">
                <i class="fas fa-arrow-left me-2"></i>返回文件夹列表
            </a>
        </div>
        
        <!-- 文档上传区域 -->
        <div class="upload-container">
            <form id="uploadForm" enctype="multipart/form-data">
                <div id="dropZone" class="drop-zone">
                    <div class="drop-zone-icon">
                        <i class="fas fa-cloud-upload-alt"></i>
                    </div>
                    <div class="fs-5 mb-1">拖拽文件到此处or点击下方按钮上传</div>
                    <div class="text-muted small mb-2">支持格式: {{ allowed_extensions }}</div>
                    <div class="d-flex justify-content-center gap-3">
                        <button type="button" id="browseButton" class="btn btn-primary">
                            <i class="fas fa-file me-2"></i>选择文件
                        </button>
                        <button type="button" id="browseFolderButton" class="btn btn-primary">
                            <i class="fas fa-folder-open me-2"></i>选择文件夹
                        </button>
                    </div>
                    <input type="file" id="fileInput" style="display: none" multiple>
                    <input type="file" id="folderInput" style="display: none" webkitdirectory directory multiple>
                </div>
                
                <div class="progress-container" id="progressContainer">
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped progress-bar-animated" 
                             id="uploadProgress" role="progressbar" 
                             aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" 
                             style="width: 0%">0%</div>
                    </div>
                    <div class="upload-status" id="uploadStatus">准备上传...</div>
                </div>
            </form>
        </div>
        
        <!-- 设置区域 -->
        <div class="settings-container">
            <div class="row">
                <div class="col-md-6 d-flex">
                    <div class="card w-100">
                        <div class="card-body d-flex flex-column">
                            <h6 class="card-title">批量切块参数</h6>
                            <form id="batchChunkForm" class="flex-grow-1">
                                <div class="mb-3">
                                    <label for="chunkStrategy" class="form-label">切块函数</label>
                                    <select class="form-select" id="chunkStrategy" name="chunk_strategy" required>
                                        <option value="" selected disabled>选择切块函数</option>
                                        {% for strategy in chunk_strategies %}
                                        <option value="{{ strategy.name }}">{{ strategy.display_name }}</option>
                                        {% endfor %}
                                    </select>
                                </div>

                                <div class="row">
                                    <div class="col-6">
                                        <div class="mb-3">
                                            <label for="chunkSize" class="form-label">切块大小</label>
                                            <input type="number" class="form-control" id="chunkSize" name="chunk_size"
                                                value="{{ default_chunk_size }}" min="50" max="2000" required>
                                            <div class="form-text small">建议值: 200-500</div>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="mb-3">
                                            <label for="overlap" class="form-label">重叠度</label>
                                            <input type="number" class="form-control" id="overlap" name="overlap"
                                                value="{{ default_overlap }}" min="0" max="200" required>
                                            <div class="form-text small">建议值: 0-50</div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                            <button type="button" id="startBatchChunkBtn" class="btn w-100 mt-auto">
                                <i class="fas fa-cut me-2"></i>批量切块
                            </button>
                        </div>
                    </div>
                </div>

                <div class="col-md-6 d-flex">
                    <div class="card w-100">
                        <div class="card-body d-flex flex-column">
                            <h6 class="card-title">批量推送至Dify</h6>
                            <form id="batchDifyForm" class="flex-grow-1">
                                <div class="mb-3">
                                    <label for="difyApiServer" class="form-label">Dify API服务器地址</label>
                                    <input type="text" class="form-control" id="difyApiServer" value="{{ dify_api_server }}" readonly>
                                </div>

                                <div class="row">
                                    <div class="col-4">
                                        <div class="mb-3">
                                            <label for="testConnectionBtn" class="form-label d-block">测试连接</label>
                                            <button type="button" class="btn btn-outline-primary w-100" id="testConnectionBtn">
                                                <i class="fas fa-plug me-2"></i>测试
                                            </button>
                                        </div>
                                    </div>
                                    <div class="col-8">
                                        <div class="mb-3">
                                            <label for="difyKnowledgeBase" class="form-label">选择知识库</label>
                                            <select class="form-select" id="difyKnowledgeBase" name="dataset_id" required>
                                                <option value="" selected disabled>请先测试连接</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </form>
                            <button type="button" id="startBatchDifyBtn" class="btn w-100 mt-auto" disabled>
                                <i class="fas fa-cloud-upload-alt me-2"></i>批量ToDify
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 任务与文档管理 -->
        <div class="tasks-documents-container">
            <ul class="nav nav-tabs" id="taskDocTabs" role="tablist">
                <li class="nav-item">
                    <button class="nav-link active" id="documents-tab" data-bs-toggle="tab" data-bs-target="#documents">
                        <i class="fas fa-file-alt me-1"></i>文档列表
                    </button>
                </li>
                <li class="nav-item">
                    <button class="nav-link" id="chunk-tasks-tab" data-bs-toggle="tab" data-bs-target="#chunkTasks">
                        <i class="fas fa-cut me-1"></i>切块任务
                    </button>
                </li>
                <li class="nav-item">
                    <button class="nav-link" id="dify-tasks-tab" data-bs-toggle="tab" data-bs-target="#difyTasks">
                        <i class="fas fa-cloud-upload-alt me-1"></i>ToDify任务
                    </button>
                </li>
            </ul>
            
            <div class="tab-content" id="taskDocTabContent">
                <!-- 文档列表 -->
                <div class="tab-pane fade show active" id="documents" role="tabpanel">
                    <div class="documents-container p-3">
                        {% if documents %}
                            <div class="select-all-container d-flex align-items-center">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="selectAllDocs">
                                    <label class="form-check-label" for="selectAllDocs">全选</label>
                                </div>
                                <button type="button" id="batchDeleteBtn" class="btn btn-danger btn-sm py-0 ms-3">
                                    <i class="fas fa-trash-alt me-1"></i>批量删除
                                </button>
                            </div>
                            
                            <div class="documents-list">
                                {% for document in documents %}
                                <div class="document-item row align-items-center">
                                    <div class="col-auto">
                                        <div class="form-check">
                                            <input class="form-check-input document-checkbox" type="checkbox" 
                                                   value="{{ document.id }}" id="doc-{{ document.id }}"
                                                   {% if document.status == '处理中' %}disabled{% endif %}>
                                        </div>
                                    </div>
                                    <div class="col-lg-8">
                                        <div class="document-name">{{ document.filename }}</div>
                                        <div class="document-meta">
                                            上传时间: {{ document.upload_time.strftime('%Y-%m-%d %H:%M:%S') }}
                                            <span class="mx-2">|</span>
                                            大小: {{ '%0.2f'|format(document.filesize/1024) }} KB
                                            <span class="mx-2">|</span>
                                            <span class="document-status {% if document.status == '已切块' %}status-chunked{% elif document.status == '处理中' %}status-processing{% else %}status-pending{% endif %}">
                                                {{ document.status }}
                                            </span>
                                            {% if document.status == '已切块' %}
                                            <span class="mx-2">|</span>
                                            <span class="document-status {% if document.dify_push_status == 'pushed' %}status-chunked{% elif document.dify_push_status == 'pushing' %}status-processing{% else %}status-pending{% endif %}">
                                                {% if document.dify_push_status == 'pushed' %}已推送{% elif document.dify_push_status == 'pushing' %}推送中{% else %}未推送{% endif %}
                                            </span>
                                            {% endif %}
                                        </div>
                                    </div>
                                    <div class="col-lg-3 text-end">
                                        <a href="/chunklab/documents/{{ document.id }}/chunk" class="btn btn-outline-primary btn-sm">
                                            <i class="fas fa-search me-1"></i>查看
                                        </a>
                                        <button type="button" class="btn btn-outline-danger btn-sm ms-2 delete-doc-btn"
                                                data-doc-id="{{ document.id }}" data-doc-name="{{ document.filename }}"
                                                {% if document.status == '处理中' %}disabled{% endif %}>
                                            <i class="fas fa-trash-alt me-1"></i>删除
                                        </button>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                        {% else %}
                            <div class="alert alert-info">
                                <i class="fas fa-info-circle me-2"></i>
                                该文件夹暂无文档。请上传文件进行批量处理。
                            </div>
                        {% endif %}
                    </div>
                </div>
                
                <!-- 切块任务 -->
                <div class="tab-pane fade" id="chunkTasks" role="tabpanel">
                    <div class="tasks-container p-3">
                        {% if chunk_tasks %}
                            <div class="tasks-list">
                                {% for task in chunk_tasks %}
                                <div class="task-item" data-task-id="{{ task.task_id }}">
                                    <div class="d-flex justify-content-between">
                                        <div class="task-name">{{ task.name }}</div>
                                        <span class="badge text-white d-flex align-items-center justify-content-center" style="background-color: {% if task.error_count > 0 %}{% if task.success_count == 0 %}#732626{% else %}#7d5c28{% endif %}{% else %}#2a5e4b{% endif %}">
                                            {% if task.status == 'completed' %}已完成{% elif task.status == 'failed' %}失败{% elif task.status == 'processing' %}处理中{% else %}等待中{% endif %}
                                        </span>
                                    </div>
                                    <div class="task-progress">
                                        <div class="progress">
                                            <div class="progress-bar" 
                                                 role="progressbar" 
                                                 style="width: {{ task.progress }}%; background-color: {% if task.error_count > 0 %}{% if task.success_count == 0 %}#732626{% else %}#7d5c28{% endif %}{% else %}#2a5e4b{% endif %}" 
                                                 aria-valuenow="{{ task.progress }}">
                                                {{ task.progress }}%
                                            </div>
                                        </div>
                                    </div>
                                    <div class="d-flex justify-content-between small mt-2">
                                        <div>总数: {{ task.total_count }} | 成功: {{ task.success_count }} | 失败: {{ task.error_count }}</div>
                                        <div class="text-muted">
                                            创建: {{ task.created_at.strftime('%Y-%m-%d %H:%M:%S') }}
                                            {% if task.completed_at %} | 完成: {{ task.completed_at.strftime('%Y-%m-%d %H:%M:%S') }}{% endif %}
                                        </div>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                        {% else %}
                            <div class="alert alert-info">
                                <i class="fas fa-info-circle me-2"></i>暂无切块任务记录。
                            </div>
                        {% endif %}
                    </div>
                </div>
                
                <!-- Dify推送任务 -->
                <div class="tab-pane fade" id="difyTasks" role="tabpanel">
                    <div class="tasks-container p-3">
                        {% if dify_tasks %}
                            <div class="tasks-list">
                                {% for task in dify_tasks %}
                                <div class="task-item" data-task-id="{{ task.task_id }}">
                                    <div class="d-flex justify-content-between">
                                        <div class="task-name">{{ task.name }}</div>
                                        <span class="badge text-white d-flex align-items-center justify-content-center" style="background-color: {% if task.error_count > 0 %}{% if task.success_count == 0 %}#732626{% else %}#7d5c28{% endif %}{% else %}#2a5e4b{% endif %}">
                                            {% if task.status == 'completed' %}已完成{% elif task.status == 'failed' %}失败{% elif task.status == 'processing' %}处理中{% else %}等待中{% endif %}
                                        </span>
                                    </div>
                                    <div class="small mb-2">知识库: {{ task.dataset_name }}</div>
                                    <div class="task-progress">
                                        <div class="progress">
                                            <div class="progress-bar" 
                                                 role="progressbar" 
                                                 style="width: {{ task.progress }}%; background-color: {% if task.error_count > 0 %}{% if task.success_count == 0 %}#732626{% else %}#7d5c28{% endif %}{% else %}#2a5e4b{% endif %}" 
                                                 aria-valuenow="{{ task.progress }}">
                                                {{ task.progress }}%
                                            </div>
                                        </div>
                                    </div>
                                    <div class="d-flex justify-content-between small mt-2">
                                        <div>总数: {{ task.total_count }} | 成功: {{ task.success_count }} | 失败: {{ task.error_count }}</div>
                                        <div class="text-muted">
                                            创建: {{ task.created_at.strftime('%Y-%m-%d %H:%M:%S') }}
                                            {% if task.completed_at %} | 完成: {{ task.completed_at.strftime('%Y-%m-%d %H:%M:%S') }}{% endif %}
                                        </div>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                        {% else %}
                            <div class="alert alert-info">
                                <i class="fas fa-info-circle me-2"></i>暂无推送任务记录。
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<!-- 公共功能模块：提供文档全选和任务状态轮询等功能 -->
<script src="/static/js/chunkgo/chunkgo_common.js"></script>

<!-- 上传模块：处理文件上传和文档删除功能 -->
<script src="/static/js/chunkgo/chunkgo_upload.js"></script>

<!-- 切块模块：负责文档批量切块相关功能 -->
<script src="/static/js/chunkgo/chunkgo_chunking.js"></script>

<!-- Dify集成模块：处理与Dify平台的连接、知识库同步等功能 -->
<script src="/static/js/chunkgo/chunkgo_dify.js"></script>
{% endblock %}